<template>
    <div>
        <Breadcrumb></Breadcrumb>
        <el-table :data="sliceRows" border style="width: 100%" stripe>
            <el-table-column prop="_id" label="编号" width="280px" align="center"></el-table-column>
            <el-table-column prop="nickName" label="姓名" width="150px" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="100px" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.gender == 1">男</span>
                    <span v-else-if="scope.row.gender == 2">女</span>
                    <span v-else>未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="province" label="省份" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.province">{{
                        scope.row.province
                    }}</span>
                    <span v-else>未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="vipdate" label="会员日期" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.vipdate">{{
                        scope.row.vipdate
                    }}</span>
                    <span v-else>未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="avatarUrl" label="头像" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 50px" :src="scope.row.avatarUrl">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="250px">
                <template slot-scope="scope">
                    <el-popover placement="right" width="400" trigger="click">
                        <span style="fontsize: 14px; color: #606266">请输入充值日期：</span>
                        <template>
                            <div class="block">
                                <el-date-picker
                                    v-model="date"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                >
                                </el-date-picker>
                            </div>
                        </template>
                        <!-- <el-input v-model="date" style="height:50px"></el-input> -->
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text">取消</el-button>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="updateOne(scope.row._id)"
                                >确定</el-button
                            >
                        </div>
                        <el-button size="mini" slot="reference" style="margin-right:10px">充值</el-button>
                    </el-popover>

                    <el-popconfirm
                        placement="top"
                        confirm-button-text="好的"
                        cancel-button-text="不用了"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确认取消该会员吗"
                        @confirm="cancleOne(scope.row._id + '')"
                    >
                        <el-button size="mini" type="warning" slot="reference" style="margin-right:10px"
                            >取消</el-button
                        >
                        <input type="text" />
                    </el-popconfirm>

                    <el-popconfirm
                        placement="top"
                        confirm-button-text="好的"
                        cancel-button-text="不用了"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确认删除列表内的用户吗"
                        @confirm="deleteOne(scope.row._id)"
                    >
                        <el-button size="mini" type="danger" slot="reference"
                            >删除</el-button
                        >
                        <input type="text" />
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="row" style="text-align: center;">
             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page=" pageData.currentPage"
                :page-sizes="[5]"
                :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total - 0">
             </el-pagination>
         </div>
        
    </div>
</template>

<script>
import Breadcrumb from "../../views/nav/Breadcrumb.vue";
import mixinsList from "../../mixins/mixinsList.js";
export default {
    data() {
        return {
            date: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            value1: "",
            value2: "",
        };
    },
    components: {
        Breadcrumb,
    },
    mixins: [mixinsList("members")],
    methods: {
        // toUpdateData(_id) {
        //     this.$router.push("/updateStudents/" + _id);
        // }
        
    },
};
</script>

<style scoped>
.el-table {
    border-radius: 10px;
    margin-bottom: 20px;
}
.el-table-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}
.el-breadcrumb {
    padding-bottom: 20px;
    border-bottom: 1px solid #999;
    margin-bottom: 20px;
}
.el-input {
    width: 200px;
    margin-right: 10px;
}
.el-select {
    width: 150px;
    margin-right: 10px;
}
.el-form {
    width: 500px;
}
</style>